<template>
    <view>
        <view class="container">
            <view class="header">
                <view class="moneytitle">悬赏红包金额</view>
                <view class="money">￥{{ taskinfo.totalmoney }}</view>

                <view class="role" @tap="goHousexy">规则说明</view>
            </view>
            <view class="title">
                <view class="jobtitle">
                    <view class="jobname">{{ taskinfo.title }}</view>
                    <view class="redtitle">推荐人才赚红包</view>
                    <view class="jobdata">
                        <view class="jobdataleft">
                            <view>￥{{ taskinfo.money }}</view>
                            <view>推荐1人</view>
                        </view>
                        <view class="jobdataright">
                            <view>{{ taskinfo.num }}</view>
                            <view>招聘人数</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="jobinfo">
                <view class="jobtitle">
                    <view>{{ jobinfo.jobtitle }}</view>
                    <view>正在招聘</view>
                </view>
                <view class="joblabel">
                    <view>{{ jobinfo.money }}元/月</view>
                    <view>|</view>
                    <view>{{ jobinfo.education }}</view>
                </view>
            </view>

            <view class="company">
                <view class="companyinfo" @tap="toCompanyDetail" :data-id="companyinfo.companyid">
                    <image :src="companyinfo.thumb"></image>
                    <view class="companyname">
                        <view>{{ companyinfo.companyname }}</view>
                        <view>{{ companyinfo.companyworker }}| {{ companyinfo.companytype }}|{{ companyinfo.companycate }}</view>
                        <view>
                            <text class="fa fa-map-marker fa-lg" style="color: #bfbfbf"></text>
                            {{ companyinfo.address }}
                        </view>
                    </view>
                </view>
            </view>

            <view class="jobdetail">
                <view class="jobtitle">规则说明</view>
            </view>
            <view class="jobcontent">
                <view class="detail">
                    <rich-text :nodes="taskinfo.content"></rich-text>
                </view>
            </view>
        </view>

        <view class="cu-bar foot bg-white tabbar border shop">
            <view class="bg-red submit" @tap="toAgentcenter" :data-id="taskinfo.id">领取任务</view>
        </view>
    </view>
</template>

<script>
import { Task } from '../../model/task-model.js';
var task = new Task();
import { Taskrecord } from '../../model/taskrecord-model.js';
var taskrecord = new Taskrecord();
import { Agent } from '../../model/agent-model.js';
var agent = new Agent();
export default {
    data() {
        return {
            taskinfo: {
                totalmoney: '',
                title: '',
                money: '',
                num: '',
                content: '',
                id: ''
            },

            jobinfo: {
                jobtitle: '',
                money: '',
                education: ''
            },

            companyinfo: {
                companyid: '',
                thumb: '',
                companyname: '',
                companyworker: '',
                companytype: '',
                companycate: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (e) {
        var that = this;
        if (that.id > 0) {
            var id = that.id;
        } else {
            var id = e.id;
            that.id = e.id;
        }
        var params = {
            id: that.id
        };
        uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#ff6732',
            animation: {
                duration: 400,
                timingFunc: 'easeIn'
            }
        });
        task.GetTaskdetail((data) => {
            console.log(data);
            that.setData({
                taskinfo: data,
                jobinfo: data.jobinfo,
                companyinfo: data.companyinfo
            });
        }, params);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        toAgentcenter: function () {
            var that = this;
            var params = {
                taskid: that.id
            };
            agent.Checkagent((data) => {
                if (data.status == 0) {
                    uni.navigateTo({
                        url: '/pages/regagent/index'
                    });
                } else if (data.status == 1) {
                    taskrecord.SaveTaskRecord((rdata) => {
                        if (rdata.status == 0) {
                        } else {
                            uni.showToast({
                                title: rdata.msg,
                                icon: 'success',
                                duration: 2000
                            });
                        }
                    }, params);
                } else {
                    uni.showModal({
                        title: '提示',
                        content: data.msg,
                        showCancel: false
                    });
                    return;
                }
            }, params);
        },

        goHousexy() {
            console.log('占位：函数 goHousexy 未声明');
        },

        toCompanyDetail() {
            console.log('占位：函数 toCompanyDetail 未声明');
        }
    }
};
</script>
<style>
page {
    background-color: #f8f8f9;
}
.container {
    background-color: #f8f8f9;
    min-height: 100%;
}
.container .header {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #ff6732, #ff4c35);
    width: 100%;
    height: 450rpx;
    border-radius: 0 0 50% 50%;
    align-items: center;
}
.container .header .moneytitle {
    color: #ffed02;
    margin-top: 50rpx;
}

.container .header .money {
    color: #ffed02;
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 40rpx;
}

.container .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.container .title .jobtitle {
    width: 650rpx;
    height: 400rpx;
    background: #fff;
    margin-top: -200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 40rpx;
}
.container .title .jobtitle .jobname {
    font-weight: 600;
    font-size: 1.1rem;
}
.container .title .jobtitle .redtitle {
    background: #fff9f0;
    color: #ff9102;
    font-size: 0.8rem;
    margin-top: 20rpx;
    padding: 5rpx;
}

.role {
    position: absolute;
    width: 180rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    background: #fca35a;
    color: #fff;
    border-radius: 25rpx 0 0 25rpx;
    left: 572rpx;
    font-size: 0.7rem;
}

.container .title .jobtitle .jobdata {
    width: 650rpx;
    display: flex;
    flex-direction: row;
    justify-content: baseline;
    margin-top: 80rpx;
}

.container .title .jobtitle .jobdata .jobdataleft {
    display: flex;
    flex-direction: column;
    width: 325rpx;
    align-items: center;
}

.container .title .jobtitle .jobdata .jobdataleft view:nth-child(1) {
    color: #fd725c;
    font-size: 0.8rem;
    font-weight: bold;
}

.container .title .jobtitle .jobdata .jobdataleft view:nth-child(2) {
    color: #999999;
    font-size: 0.8rem;
}

.container .title .jobtitle .jobdata .jobdataright {
    display: flex;
    flex-direction: column;
    width: 325rpx;
    align-items: center;
}

.container .title .jobtitle .jobdata .jobdataright view:nth-child(2) {
    color: #999999;
    font-size: 0.8rem;
}

.container .title .jobtitle .jobdata .jobdataright view:nth-child(1) {
    color: #fd725c;
    font-size: 0.8rem;
    font-weight: bold;
}
.container .jobinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    margin-top: 20rpx;
    padding-top: 30rpx;
    padding-bottom: 10rpx;
}

.container .jobinfo .jobtitle {
    width: 650rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.container .jobinfo .jobtitle view:nth-child(1) {
    font-weight: 600;
    font-size: 1rem;
}

.container .jobinfo .jobtitle view:nth-child(2) {
    background: #fff9f0;
    color: #ff9102;
    font-size: 0.8rem;
    padding: 5rpx;
}

.container .jobinfo .joblabel {
    width: 650rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 90rpx;
}

.container .jobinfo .joblabel view:nth-child(1) {
    font-size: 0.8rem;
    color: #ff9102;
}
.container .jobinfo .joblabel view:nth-child(2) {
    font-size: 0.8rem;
    color: #7b7a7a;
}
.container .jobinfo .joblabel view:nth-child(3) {
    font-size: 0.8rem;
    color: #7b7a7a;
}

.container .jobdetail {
    background: #fff;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
}

.container .jobdetail .jobtitle {
    font-weight: 600;
    font-size: 1rem;
    width: 640rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.container .jobcontent {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.container .jobcontent .detail {
    width: 640rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.container .companyinfo {
    margin-top: 10rpx;
    width: 650rpx;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 1rpx solid #e5e5e5;
    align-self: center;
}

.container .companyinfo image {
    width: 150rpx;
    height: 150rpx;
    align-self: center;
}
.company {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 10rpx;
    width: 100%;
}

.container .companyinfo .companyname {
    width: 70%;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
}
.container .companyinfo .companyname view:nth-child(1) {
    font-size: 0.8rem;
    color: #000;
}
.container .companyinfo .companyname view:nth-child(2) {
    font-size: 0.7rem;
    color: #777676;
}
.container .companyinfo .companyname view:nth-child(3) {
    font-size: 0.7rem;
    color: #777676;
}
.container .companyaddress {
    padding-left: 20rpx;
    padding-top: 20rpx;

    font-size: 0.8rem;
}

.weixinmao-float {
    height: 150rpx;
}
.weixinmao-foot {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding-bottom: 10rpx;
    padding-top: 10rpx;
}

button::after {
    border: none;
}

.weixinmao-foot view:nth-child(1) {
    align-self: center;
    height: 80rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    padding-top: 20rpx;
    background: #fff;
}
.black {
    color: #777676;
}
.red {
    color: red;
}
.weixinmao-foot view:nth-child(2) {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    width: 35%;
}

.weixinmao-foot view:nth-child(3) {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;

    width: 35%;
}

.weixinmao-foot view image {
    width: 50rpx;
    height: 50rpx;
    align-self: center;
}

.footerbuttons {
    font-size: 0.8rem;
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;
    border: 1rpx solid #ff4c35;
    color: #ff4c35;
    margin-top: 15rpx;
}

.weixinmao-float_pay {
    height: 150rpx;
}
.weixinmao-foot_pay {
    display: flex;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #1aac19;
}

.weixinmao-foot_pay view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
}
.weixinmao-foot_pay view image {
    width: 70rpx;
    height: 70rpx;
    align-self: center;
}
</style>
